<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <div><div class="abstatic-height"></div>
  <div class="app-container calendar-list-container">
    <el-row>
      <div class="xf-tabletop-handles">
        <div class="xf-tabhd-left">

        </div>
        <div class="xf-tabhd-right">
          设施类型
          <el-input v-model="listQuery.equipmentType" placeholder="请输入设施类型" class="xf-query-input" size="mini" clearable></el-input>
          <el-button @click="tableQuery" type="primary" size="mini">查询</el-button>
          <el-button @click="wxSendMessages()" type="primary" size="mini">发送消息</el-button>
        </div>
      </div>
    </el-row>
    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" style="width: 100%">
      <el-table-column label="设施类型编号">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="设施类型">
        <template slot-scope="scope">
          <span>{{scope.row.equipmentType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="检查项">
        <template slot-scope="scope">
          <span>{{scope.row.checkItemCount}}项</span>
        </template>
      </el-table-column>
      <el-table-column label="检测项">
        <template slot-scope="scope">
          <span>{{scope.row.testItemCount}}项</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button size="small" @click="handleUpdate(scope.row)" type="text">
            点击查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[15,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
    <slider-panel :Show.sync="dialogFormVisible" custom-class="out-side-frame">
      <div class="form-content-frame">
      <el-form :model="form" ref="form" label-width="100px" label-position='top'>
        <el-form-item label="设施类型">
          <el-input v-model.trim="form.equipmentType" placeholder="请输入设施类型" style="width:384px;" :disabled="true"></el-input>
        </el-form-item>
        <div class="fc-options-wrap">
          <p class="fc-options-title">检查项({{checkItemCount}})</p>
          <div class="fc-options-items">
            <div class="fc-options-left">
              <p>选择项</p>
              <!--选项-->
              <div class="fc-option-item" v-for="(item,index) in fcCheckedList" :key="index" v-if="fcCheckedList.length>0">
                <el-input v-model.trim="item.checkTestItem" placeholder="请输入选择项" style="width:384px;margin-right: 10px;" :disabled="true"></el-input>
              </div>
              <div v-if="fcCheckedList.length<=0" class="no-placeholder">
                暂无选择项
              </div>
            </div>
            <div class="fc-options-right">
              <p>输入项</p>
              <!--选项-->
              <div class="fc-option-item" v-for="(item,index) in fcInputList" :key="index" v-if="fcInputList.length>0">
                <el-input v-model.trim="item.checkTestItem" placeholder="请输入输入项" style="width:384px;margin-right: 10px;" :disabled="true"></el-input>
              </div>
              <div v-if="fcInputList.length<=0" class="no-placeholder">
                暂无输入项
              </div>
            </div>
          </div>
          <p class="fc-options-title">检测项({{testItemCount}})</p>
          <div class="fc-options-items">
            <div class="fc-options-left">
              <p>选择项</p>
              <!--选项-->
              <div class="fc-option-item" v-for="(item,index) in fcCheckedListCd" :key="index" v-if="fcCheckedListCd.length>0">
                <el-input v-model.trim="item.checkTestItem" placeholder="请输入选择项" style="width:384px;margin-right: 10px;":disabled="true"></el-input>
              </div>
              <div v-if="fcCheckedListCd.length<=0" class="no-placeholder">暂无选择项</div>
            </div>
            <div class="fc-options-right">
              <p>输入项</p>
              <!--选项-->
              <div class="fc-option-item" v-for="(item,index) in fcInputListCd" :key="index" v-if="fcInputListCd.length>0">
                <el-input v-model.trim="item.checkTestItem" placeholder="请输入输入项" style="width:384px;margin-right: 10px;" :disabled="true"></el-input>
              </div>
              <div v-if="fcInputListCd.length<=0" class="no-placeholder">暂无输入项</div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel()" size="medium">确 定</el-button>
      </div>
      </div>
    </slider-panel>
  </div>
  </div>
</template>

<script>
  import {
    page,
    addObj,
    getObj,
    wxSendMessage,
  } from "@/api/device/facilityTypeManger/index";
  import sliderPanel from '@/components/SliderPanel'

  export default {
    name: "facilityTypeManger",
    components: {sliderPanel},
    data() {
      return {
        currentObjId:'',
        childSitesShow:false,
        childSiteids:'',
        testItemCount:'0',
        checkItemCount:'0',
        fcCheckedList:[
          {checkTestItem:''}
        ],
        fcInputList:[
          {checkTestItem:''}
        ],
        fcCheckedListCd:[
          {checkTestItem:''}
        ],
        fcInputListCd:[
          {checkTestItem:''}
        ],
        form: {
          equipmentType: undefined,
        },
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 15,
          equipmentType: "",
        },
        dialogFormVisible: false,
        deleteJumpObj:'',
        currentSelectObj:{},
        dialogStatus: "",
        textMap: {
          update: "查看设施类型",
          create: "添加设施类型"
        },
        tableKey: 0
      };
    },
    created() {
      this.getList();
    },
    methods: {
      wxSendMessages() {
        // 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx1a3663851e3a1647&secret=1443d721e8fffc228af8a097b03b5535'
        /*wxSendMessage().then(response => {
          console.log(response);
        })*/
        /*const appId = 'wx1a3663851e3a1647';
        const appSecret = '1443d721e8fffc228af8a097b03b5535';*/
        wxSendMessage().then(response => {
          console.log(response);
        })
      },
      /*wxSendMessages(){
        wxSendMessage.request({
          url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=(wx1a3663851e3a1647)&secret=(1443d721e8fffc228af8a097b03b5535)',
          method:"GET",
          success:res=>{
            console.log("调用成功,结果值为:",res);
          },
          fail:console.error
        })
      },*/

      tableQuery() {
        this.getList();
      },
      getList() {
        this.listLoading = true;
        page(this.listQuery).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        });
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleUpdate(row) {
        getObj({id:row.id}).then(res => {
          this.form.equipmentType = res.data.equipmentType;
          this.fcCheckedList = res.data.checkItems1;
          this.fcInputList =  res.data.checkItems2;
          this.fcCheckedListCd = res.data.testItems1;
          this.fcInputListCd = res.data.testItems2;
          this.checkItemCount = res.data.checkItemCount;
          this.testItemCount = res.data.testItemCount;

          this.dialogFormVisible = true;
          this.dialogStatus = "update";
          this.currentObjId = row.id;
        });
      },
      cancel() {
        this.dialogFormVisible = false;
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .no-placeholder{
    padding: 10px 0;
    font-size: 12px;
    color: #999;
  }
  .xf-query-input,
  .xf-query-select {
    width: 200px;
    margin: 0 10px;
  }
  .ft-fulldialog > div {
    width: 900px;
    margin: 0 auto;
  }
  .ft-fulldialog .el-dialog__title {
    font-size: 32px;
  }
  .out-side-frame {
    .fc-options-wrap{
      color: rgba(255,255,255,.7);
    }
    .el-dialog__header {
      margin-top: 20px;
    }
    .custom-dialog-btn {
      position: absolute;
      font-size: 30px;
      left: 40px;
      top: 20px;
      color: #fff;
      &:hover {
        cursor: pointer;
      }
    }
    .dialog-footer {
      text-align: left;
    }
    .fc-options-title{
      color: #fff;
      font-weight: 700;
      margin: 0;
      line-height: 36px;
    }
    .fc-options-items{
      display: flex;
      &>div{
        flex: 1;
      }
      .fc-option-item{
        margin-bottom: 15px;
      }
    }
  }
</style>
